<template>
  <div class="PowerAnalysisbox">
    <div class="leftbox">
      <EnterpriseTree @handleClick="handleClick"></EnterpriseTree>
    </div>
    <div class="rightvbox">
      <div class="righttop">
        <el-form ref="form" label-position="left" label-width="80px">
            <el-row :gutter="20">
                <el-col :span="6" style="display: flex;margin-top: 4px;">
                  <el-radio-group
                    v-model="radio3"
                    size="small"
                    style="margin-right: 20px">
                    <el-radio-button label="2">月</el-radio-button>
                    <el-radio-button label="3">年</el-radio-button>
                  </el-radio-group>
                  <el-date-picker
                    v-if="radio3 == '2'"
                    v-model="value2"
                    type="month"
                    style="flex: 1;"
                    value-format="yyyy-MM"
                    placeholder="选择月"
                    size="small"
                  ></el-date-picker>
                  <el-date-picker
                    v-else
                    v-model="value3"
                    type="year"
                    style="flex: 1;"
                    value-format="yyyy"
                    placeholder="选择年"
                    size="small"
                  ></el-date-picker>
                </el-col>
                <el-col :span="18" style="text-align: right;">
                  <el-form-item label="">
                    <el-button size="small" @click="chongzhi">重 置</el-button>
                     <el-button type="primary" size="small" @click="submit">查 询</el-button>
                  </el-form-item>
                </el-col>
            </el-row>
        </el-form>

      </div>
      <div class="rightbutt">
        <div class="righttitle">
          <div>功率因数分析</div>
          <div class="titlebutt">
            <TopTile
              @command="command"
              @daochu="daochu"
              @shuaxin="shuaxin"
            ></TopTile>
          </div>
        </div>
        <div class="echartandtable">
          <div class="echarts" ref="gonglv"></div>
          <div class="echarts">
            <TableColumn
              ref="tablecolumn"
              :issize="issize"
              :tableData="tableData"
              :tableConfig="tableConfig"
            >
            </TableColumn>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import request from '@/utils/request'
import TableColumn from '@/components/Table/index.vue'
import { exportexcel } from '@/utils/excel'
import TopTile from '@/components/TopTitle/index.vue'
import EnterpriseTree from '@/components/EnterpriseTree/index.vue'
export default {
  name: 'CallPoliceIndex',
  components: {
    EnterpriseTree,
    TableColumn,
    TopTile,
  },
  data() {
    return {
      radio3: '2',
      value2: '',
      value3: '',
      issize: 'medium',
      tableData: [],
      tableConfig: [
        { label: '设备', prop: 'name' },
        { label: '日期', prop: 'dateStr', center: 'center' },
        { label: '正向有功电量(kWh)', prop: 'epower', center: 'right' },
        { label: '正向无功电量(kvarh)', prop: 'epowerReactive', center: 'right' },
        {
          label: '平均功率因数',
          prop: 'epowerFactor',
          center: 'right',
          formatter: (row, column, cellValue, index) => {
            return Number(cellValue)?.toFixed(2)
          },
        },
        {
          label: '电度电费(元)',
          prop: 'epowerFee',
          center: 'right',
          formatter: (row, column, cellValue, index) => {
            return Number(cellValue)?.toFixed(2)
          },
        },
        { label: '力调电费', prop: 'epowerFeeForce', center: 'right' },
      ],
    }
  },

  mounted() {
    this.gettime()
  },

  methods: {
    // 树节点点击事件
    handleClick(val) {
      this.treevalue = val
      this.submit()
    },
    // 查询
    async submit() {
      this.$refs.tablecolumn.loading = true
      this.getfadianlv()
      const dateStr = this.radio3 == '2' ? this.value2 : this.value3
      const {
        data: { list },
      } = await request.get(
        `pio-microservice-biz/pio/power/factor/analyse/list?dateStr=${dateStr}&deviceIds=${this.treevalue.id}&periodType=${this.radio3}`
      )
      this.tableData = list
      this.$refs.tablecolumn.loading = false
    },
    // 重置
    chongzhi() {
      this.radio3 = '2'
      this.gettime()
      this.submit()
    },
    // 调节表格密度
    command(val) {
      if (val === '默认') {
        this.issize = 'medium'
      } else if (val === '中等') {
        this.issize = 'small'
      } else {
        this.issize = 'mini'
      }
    },
    // 导出
    daochu() {
      const dateStr = this.radio3 == '2' ? this.value2 : this.value3
      exportexcel(
        'pio-microservice-biz/pio/power/factor/analyse/excel',
        {
          dateStr,
          deviceIds: this.treevalue.id,
          periodType: this.radio3,
        },
        '功率因数'
      )
    },
    // 刷新列表
    shuaxin() {
      this.submit()
      this.$message.success('数据刷新成功')
    },
    // 获取当前时间戳
    gettime() {
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month = mon < 10 ? '0' + mon : mon
      this.value3 = year.toString()
      this.value2 = year + '-' + month
    },
    // 获取功率图表
    async getfadianlv(val) {
      var chartDom = this.$refs.gonglv
      var myChart = echarts.init(chartDom)
      var option
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: chartDom,
      })
      const dateStr = this.radio3 == '2' ? this.value2 : this.value3
      const {
        data: { list },
      } = await request.get(
        `pio-microservice-biz/pio/power/factor/analyse/line?dateStr=${dateStr}&deviceIds=${this.treevalue.id}&periodType=${this.radio3}`
      )
      const timePoints = []
      for (let i = 0; i < list.length; i++) {
        if (list[i]?.epowerList.length > 0) {
          list[i]?.epowerList.forEach((data) => {
            timePoints.push(data.dateStr)
          })
          break
        }
      }
      option = {
        color: ['#5087ec', '#68bbc4', '#58a55c'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999',
            },
          },
        },
        grid: {
          left: '2%',
          right: '1%',
          bottom: '3%',
          containLabel: true,
        },
        legend: {},
        xAxis: [
          {
            type: 'category',
            data: timePoints,
            axisPointer: {
              type: 'shadow',
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            nameTextStyle: {
              color: '#000',
              fontSize: 16,
              padding: [0, 40, 10, 0],
            },
          },
          {
            type: 'value',
            name: '',
          },
        ],
        series: [
          {
            name: '有功电量',
            type: 'bar',
            data: list
              .find((ele) => ele.name == '有功电量')
              ?.epowerList.map((ele) => ele.value),
          },
          {
            name: '无功电量',
            type: 'bar',
            data: list
              .find((ele) => ele.name == '无功电量')
              ?.epowerList.map((ele) => ele.value),
          },
          {
            name: '平均功率因数',
            type: 'line',
            smooth: true,
            yAxisIndex: 1,
            data: list
              .find((ele) => ele.name == '平均功率因数')
              ?.epowerList.map((ele) => ele.value),
          },
        ],
      }
      myChart.clear()
      option && myChart.setOption(option)
      loading.close()
    },
  },
}
</script>

<style scoped>
.PowerAnalysisbox {
  height: 100%;
  padding: 10px;
  display: flex;
  .leftbox {
    width: 300px;
    background-color: #fff;
    padding: 20px;
    height: 100%;
  }
  .rightvbox {
    margin-left: 10px;
    height: 100%;
    width: calc(100% - 310px);
    .righttop {
      height: 80px;
      padding: 20px;
      background-color: #fff;
      margin-bottom: 10px;
    }
    .rightbutt {
      height: calc(100% - 90px);
      background-color: #fff;
      padding: 20px;
      .righttitle {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
      }
      .echartandtable {
        height: 94%;
        .echarts {
          height: 50%;
        }
      }
    }
  }
}
</style>
